<!DOCTYPE html>
<html>
<head>
  <title>kaart.maakaart.ee</title>

  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

  <link rel="stylesheet" href="dist/leaflet.css" />
  <link rel="stylesheet" href="dist/L.Control.Locate.css" />
  <link rel="stylesheet" href="dist/leaflet-search.css" />
  <link rel="stylesheet" href="dist/L.Control.Zoomslider.css" />
  <link rel="stylesheet" href="dist/Leaflet.EditInOSM.css" />
  <link rel="stylesheet" href="dist/Control.MiniMap.css" />
  <link rel="stylesheet" href="dist/Control.FullScreen.css" />
    <!--[if lte IE 8]>
  <link rel="stylesheet" href="dist/leaflet.ie.css" />
  <link rel="stylesheet"/href="dist/L.Control.Zoomslider.ie.css" />
  <link rel="stylesheet" href="dist/L.Control.Locate.ie.css" />
    <![endif]-->
  

  <script src="dist/leaflet.js"></script>
  <script src="dist/leaflet.geocoding.js"></script>
  <script src="dist/leaflet-hash.js"></script>
  <script src="dist/L.Control.Locate.js"></script>
  <script src="dist/leaflet-search.js"></script>
  <script src="dist/L.Control.Zoomslider.js" ></script>
  <script src="dist/Leaflet.EditInOSM.js" ></script>
  <script src="dist/Control.MiniMap.js"></script>
  <script src="dist/Control.FullScreen.js"></script>
  
  <style>
    body {
      padding: 0;
      margin: 0;
    }
    html, body, #map {
      height: 100%;
    }
  </style>
</head>
<body>

  <div id="map"></div>
  
  <script>
        
    var osm = L.tileLayer('http://kaart.maakaart.ee/osm/tiles/1.0.0/osm_EPSG900913/{z}/{x}/{y}.png?origin=nw', {
      attribution: 'Aluskaart &copy; <a href="http://osm.org/copyright">OpenStreetMap</a>'
    });
    
    var opencyclemap = L.tileLayer('http://{s}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png', {
      attribution: 'Aluskaart &copy; <a href="http://openstreetmap.org">OpenStreetMap</a>, <a href="http://www.opencyclemap.org">OpenCycleMap</a>'
    });  
  
    var ortofoto = L.tileLayer('http://kaart.maakaart.ee/orto/{z}/{x}/{y}.jpeg', {
      minZoom: 14,
      attribution: '&copy; Maa-amet'
    });
    
    var pohikaart = L.tileLayer.wms("http://kaart.maaamet.ee/wms/alus-geo", {
      layers: 'pohi_vr2',
      format: 'application/vnd.ogc.se_inimage',
      transparent: true,
      attribution: '&copy; Maa-amet, andmed <a href="http://kaart.maakaart.ee/">maakaart.ee</a>'
    });
    
    var topo50 = L.tileLayer.wms("http://kaart.maakaart.ee/service", {
      layers: 'topo50',
      format: 'image/png',
      transparent: true,
      attribution: 'Andmekiht <a href="http://kaart.maakaart.ee/">maakaart.ee</a>',
      opacity: 0.5
    });
      
    
    var map = new L.Map('map', {
      zoom: 7, 
      center: [58.651, 24.609],
      layers: [osm],
      mapConfig: { zoomsliderControl: true, zoomControl: false },
      editInOSMControlOptions: { editors: [IDortofoto = new L.Control.EditInOSM.Editors.Id({ 
        url: "http://openstreetmap.us/iD/release/#editor=id&background=custom:http://kaart.maakaart.ee/orto/{z}/{x}/{y}.jpeg&map="
      })]}
    });
   
    
    var baseLayers = {
      "OpenStreetMap (eesti k.)": osm,
      "Rattateede kaart": opencyclemap,
      "Maa-ameti aerofoto": ortofoto
    };

    var overlays = {
      "NL ajaloolised topokaardid": topo50
    };
      
    L.control.layers(baseLayers, overlays).addTo(map);
    
    var hash = new L.Hash(map);
      
    map.addControl( new L.control.locate({
      follow: true,
      stopFollowingOnDrag: true
    }));
    
    map.addControl( new L.Control.Search({
      url: 'http://nominatim.openstreetmap.org/search?format=json&q={s}',
      jsonpParam: 'json_callback',
      propertyName: 'display_name',
      propertyLoc: ['lat','lon'],
      markerLocation: true,
      autoType: false,
      autoCollapse: true,
      minLength: 2,
      zoom:18
    }));
    
    
    var fullScreen = new L.Control.FullScreen(); 
    map.addControl(fullScreen);
    
    var osm2 = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      minZoom: 0, 
      maxZoom: 18, 
      attribution: 'Aluskaart &copy; <a href="http://osm.org/copyright">OpenStreetMap</a>'
    });
    var miniMap = new L.Control.MiniMap(osm2, { 
      toggleDisplay: true
    }).addTo(map);
              
    
  </script>
</body>
</html>
